<form name="service.$forms.base" novalidate>
    <div class="row">
        <div class="col-md-8">
            <div ng-if="::!service.serviceId" class="form-group" ng-class="{'has-error': (service.$forms.base.podAppName.$touched || service.$forms.base.$submitted )
                         && (service.$forms.base.podAppName.$error.pattern || service.$forms.base.podAppName.$error.required || service.$forms.base.podAppName.$error.duplicate)}">
                <label for="podAppName">服务名 <i ng-show="service.serviceCodeChecking" class="fa-fw fa fa-refresh fa-spin"></i></label>
                <input type="text" maxlength="50" ng-model="service.podAppName" class="form-control" id="podAppName"
                       name="podAppName" placeholder="请输入服务名" ng-focus="getIsAdmin()" ng-pattern="/^[\w-]+$/" ng-blur="service.checkServiceValidate(service)" required/>
                <div class="text-danger" ng-show="(service.$forms.base.podAppName.$touched || service.$forms.base.$submitted )">
                    {{((service.$forms.base.podAppName.$error.pattern || service.$forms.base.podAppName.$error.required) && '请输入有效服务名 (允许数字、英文字母、下划线与横线 )')
                    || (service.$forms.base.podAppName.$error.network && '检查服务名请求异常, ')
                    || (service.$forms.base.podAppName.$error.duplicate && '该服务名已存在') || ''}}
                    <a ng-click="service.checkServiceValidate()" ng-show="service.$forms.base.podAppName.$error.network">重试</a>
                </div>
            </div>
            <div ng-if="::service.serviceId"  class="form-group">
                <label>服务名</label>
                <div>{{::service.podAppName}}</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-tooltip-group"><i class="fa fa-question"></i>允许数字、英文字母与横线</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label>镜像类型</label>
                <select name="imageType" ng-model="base.imageType" class="form-control" ng-change="base.getImageList()" required>
                    <option value="002">构建镜像</option>
                    <option value="003">共享镜像</option>
                </select>
            </div>
        </div>
   
        <!-- 构建用户权限 -->
           <div class="col-md-4"> 
            <div class="form-group image-file-element" ng-show="searchBtn" ng-class="{'has-error': (form.baseImgId.$touched || form.$submitted )
                          && form.baseImgId.$error.required}">
                        <label>用户镜像索引</label>    
                            <ui-select ng-model="base.user" ng-change="base.getBase(obj)" name="baseImgId"  required>
                                 <ui-select-match placeholder="请选择用户">
                                    <span>{{$select.selected.userCode}}</span>
                                </ui-select-match> 
                                <ui-select-choices repeat="username as username in service.username | filter: $select.search">
                                    <span ng-bind-html="username.userCode"></span>
                                </ui-select-choices>
                            </ui-select>
                             <div class="text-danger" ng-show="(form.baseImgId.$touched || form.$submitted )
                                && form.baseImgId.$error.required">用户不能为空
                            </div> 
                        </div> 
                        </div>
                        </div>   
    <div class="row">
        <div class="col-md-8">
            <div class="couple-form-group">
                <label>应用镜像 <i ng-show="base.verLoading" class="fa-fw fa fa-refresh fa-spin"></i></label>
                <div ng-if="!base.appImg.imageName_ver" class="couple-form-info">
                    <div class="form-group" style="width: 40%" ng-class="{'has-error': (service.$forms.base.appImg.$touched || service.$forms.base.$submitted )
                         && service.$forms.base.appImg.$error.required}">
                         <select name="appImg" ng-model="service.appImg.imageName" class="form-control" ng-change="base.getAppImgVer(service.appImg.imageName)" required>
                             <option value="" >请选择应用镜像</option>
                             <option ng-value="opt.imageName" ng-repeat="opt in service.appImgList">{{opt.imageName}}</option>
                         </select>
                          <!-- <ui-select ng-model="service.appImg.id" name="appImg" on-select="base.getAppImgVer($select.selected.imageName, service.appImg)" required>
                            <ui-select-match placeholder="请选择应用镜像">
                                <span title="{{$select.selected.imageName}}">{{$select.selected.imageName}}</span>
                            </ui-select-match>
                            <ui-select-choices repeat="opt.id as opt in service.appImgList | filter: $select.search">
                                <div ng-bind-html="::opt.imageName"></div>
                                <small>更新时间 : {{::opt.lastUpdateTime | date:'yyyy-MM-d HH:mm:ss'}}</small>
                            </ui-select-choices>
                        </ui-select>   -->
                        <div class="text-danger" ng-show="(service.$forms.base.appImg.$touched || service.$forms.base.$submitted )
                         && service.$forms.base.appImg.$error.required">请选择应用镜像
                        </div>
                    </div>
                    <div class="form-group text-only">:</div>
                    <div class="form-group" style="width: 25%;" ng-class="{'has-error': (service.$forms.base.appImgVer.$touched || service.$forms.base.$submitted )
                        && service.$forms.base.appImgVer.$error.required}">
                        <select ng-change="base.getConfigs(service.appImg.ver)" ng-model="service.appImg.ver" name="appImgVer" class="form-control"
                                ng-options="opt as opt.tag for opt in base.appImgVerList" ng-disabled="!base.appImgVerList" required>
                            <option value="">请选择版本</option>
                        </select>

                        <div class="text-danger" ng-show="(service.$forms.base.appImgVer.$touched || service.$forms.base.$submitted )
                         && service.$forms.base.appImgVer.$error.required">请选择版本
                        </div>
                    </div>
                </div>
                <div ng-if="base.appImg.imageName_ver">{{::base.appImg.imageName_ver}}</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-tooltip-group"><i class="fa fa-question"></i>指定服务基于哪个应用镜像</div>
        </div>
    </div>
      <div class="row">
        <div class="col-md-8">
            <div class="couple-form-group">
                <label>配置文件 <i ng-show="base.configverLoading" class="fa-fw fa fa-refresh fa-spin"></i></label>
                <div ng-if="!base.appImg.imageName_ver" class="couple-form-info">
                     <div class="form-group" style="width:40%;" ng-class="{'has-error': (service.$forms.base.imageConfig.$touched || service.$forms.base.$submitted )&& service.$forms.base.imageConfig.$error.required}">
                        <select ng-change="base.getConfigVers(service.appImg.imageConfig)" name="imageConfig" class="form-control" ng-model="service.appImg.imageConfig" ng-disabled="!base.configList" ng-options="config as config.configName for config in base.configList"  required>
                            <option value="">请选择配置文件</option>
                         
                        </select>
                          <div class="text-danger" ng-show="(service.$forms.base.imageConfig.$touched || service.$forms.base.$submitted )
                         && service.$forms.base.imageConfig.$error.required">请选择配置文件
                        </div>
                    </div>
                    <div class="form-group text-only">:</div>
                     <div class="form-group" style="width: 25%;" ng-class="{'has-error': (service.$forms.base.imageConfigVer.$touched || service.$forms.base.$submitted )
                        && service.$forms.base.imageConfigVer.$error.required}">
                        <select ng-model="service.appImg.imageConfigVer" name="imageConfigVer" class="form-control"
                                ng-options="opt as opt.configVersion for opt in base.configVerList" ng-change="base.getConfigsData(service.appImg.imageConfigVer)" ng-disabled="!base.configVerList||!base.configList" required>
                            <option value="">请选择版本</option>
                        </select>

                        <div class="text-danger" ng-show="(service.$forms.base.imageConfigVer.$touched || service.$forms.base.$submitted )
                         && service.$forms.base.imageConfigVer.$error.required">请选择版本
                        </div>
                    </div>
                </div>
                <div ng-if="base.appImg.imageName_ver">{{::base.appImg.imageName_ver}}</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-tooltip-group"><i class="fa fa-question"></i>指定应用镜像基于哪套配置</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <div class="form-group" ng-class="{'has-error': (service.$forms.base.podNum.$touched || service.$forms.base.$submitted )
                     && (service.$forms.base.podNum.$error.required || service.$forms.base.podNum.$error.pattern)}">
                <label for="podNum">容器数</label>
                <input type="text" maxlength="10" ng-model="service.podNum" id="podNum" class="form-control"
                       style="width: 48%"
                       name="podNum" placeholder="请输入容器数" ng-pattern="/^\d+$/" required/>

                <div class="text-danger" ng-show="(service.$forms.base.podNum.$touched || service.$forms.base.$submitted )
                     && (service.$forms.base.podNum.$error.required  || service.$forms.base.podNum.$error.pattern)">请输入有效的容器数
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-tooltip-group"><i class="fa fa-question"></i>指定服务默认分配容器个数</div>
        </div>
    </div>
      <div class="row">
        <div class="col-md-8">
            <div class="form-group" ng-class="{'has-error': (service.$forms.base.servicePort.$touched || service.$forms.base.$submitted )
                     && (service.$forms.base.servicePort.$error.required || service.$forms.base.servicePort.$error.pattern)}">
                <label for="servicePort">服务端口</label>
                <input type="text" maxlength="10" ng-model="service.servicePort" id="servicePort" class="form-control"
                       style="width: 48%"
                       name="servicePort" placeholder="服务端口" ng-pattern="/^\d+$/" required/>

                <div class="text-danger" ng-show="(service.$forms.base.servicePort.$touched || service.$forms.base.$submitted )
                     && (service.$forms.base.servicePort.$error.required  || service.$forms.base.servicePort.$error.pattern)">请输入有效的服务端口
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-tooltip-group"><i class="fa fa-question"></i>指定服务端口</div>
        </div>
    </div>
</form>